<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册</title>
    <link rel="stylesheet" href="/css/Login.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/axios.min.js" type="text/javascript"></script>
    <script src="/js/vue.js"></script>
</head>
<style>

</style>
<body>
    <div id="app">
        <form action="userservlet" method="post">
            <div class="mi-header">
                <div class="mi-title">
                    <div class="mi-logo">
                        <img src="/img/Login/Login.jpg" onclick="location.href=('Home.html')" width="60px" height="60px" />
                    </div>
                    小米账号
                </div>
                <div class="mi-nav">
                    <a class="mi-nav__item url">用户协议</a>
                    <a class="mi-nav__item url">隐私政策</a>
                    <a class="mi-nav__item url">帮助中心</a>
                </div>
            </div>
            <div class="mi-content">
                <div class="mi-content__card">
                    <div id="login">
                        <span>登录</span>
                    </div>
                    <div id="regist">
                        <span>注册</span>
                    </div>
                    <div id="logindiv">
                        <input class="account_input"  id="account_input" type="text"  />
                        <p class="UserAccount">邮箱/手机号码/小米ID</p>
                        <p class="AccountHint">请输入账号</p>
                        
                        <input class="Password_input" id="Password_input" type="password" />
                        <p class="UserPassword">密码</p>
                        <p class="PasswordHint">请输入登录密码</p>
                        <input type="checkbox" id="Login_checkbox" value="" />
                        <p class="Read">已阅读并同意小米账号</p>
                        <a class="TCP" href="#">用户协议</a>
                        <p class="and">和</p>
                        <a class="Policy" href="#">隐私政策</a>
                        <input id="loginButton" type="button" value="登录" @click="loginButton()"  />
                        <a href="#" class="ForgetPassword">忘记密码？</a>
                        <a href="#" class="PhoneLogin">手机号登录</a>
                    </div>
                    <div id="rigistdiv">
                        <input type="button" id="rigistdiv_country_button" />
                        <p id="country" onselectstart = "return false">国家/地区</p>
                        <p id="China"   onselectstart = "return false">中国</p>
                        <input type="button" id="rigistdiv_phone_button" />
                        <p id="countryid">国家码</p>
                        <p id="countryid_number">+86</p>
                        
                        <input class="phone_input" id="phone_input" v-model="rigistModel.phone" type="text" />
                        <p class="UserPhone">手机号</p>
                        <p class="PhoneHint" id="psj">请输入手机号码</p>
                        
                        <input class="message_input"  id="message_input" v-model="rigistModel.message" type="text" />
                        <p class="UserMessage">请输入验证码</p>
                        <input type="button" class="message_button" onclick="return sendCode(this)" @click="sms()" value="获取验证码" />
                        <p class="MessageHint">请输入短信验证码</p>
                        <br>
                        <input type="checkbox" id="rigist_checkbox"  value=""/>
                        <p class="Read">已阅读并同意小米账号</p>
                        <a class="TCP" href="#">用户协议</a>
                        <p class="and">和</p>
                        <a class="Policy" href="#">隐私政策</a>
                        <input id="rigistButton" type="button" value="注册" @click="rigistButton()" />
                        <a href="#" class="ForgetPassword">收不到验证码？</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script src="/js/userscommon.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",  
            data:{
                rigistModel: {
                    phone: '',
                    message: '',
                },
            },
            methods: {
                rigistButton(){
                    var phone = document.getElementById("phone_input").value
                    var message = document.getElementById("message_input").value
                    var checkbox = document.getElementById("rigist_checkbox")
                    
                    if(phone.length == 0 || message.length == 0){
                        alert("请填写信息")
                    }
                    else if(checkbox.checked == false){
                        alert("请您同意用户条款")
                    }
                    else{
                        var code = window.sessionStorage.getItem('Code');
                        if(message==code){
                            axios
                            .get('/user/register', { params: { phone : phone } })
                            .then(function (resp) {
                                console.log(resp.data.data)
                                if (resp.data.data==0) {
                                    alert("注册成功")
                                    window.location.href=
                                    "RegistrationFilling.html?phone="+phone
                                }else{
                                    alert("该手机号已注册过，请登录")
                                }
                            })
                        }
                        else{
                            alert("验证码不正确")
                        }
                    }
                },
                loginButton(){
                    var account = document.getElementById("account_input").value
                    var password = document.getElementById("Password_input").value
                    var checkbox = document.getElementById("Login_checkbox")
                    if(account.length == 0 || password.length == 0){
                        alert("请填写信息")
                    }
                    else if(checkbox.checked == false){
                        alert("请您同意用户条款")
                    }
                    else{
                        axios
                        .get('/user/login', { params: { account : account ,  password : password} })
                        .then(function (resp) {
                            if (resp.data.data!=0) {
                                alert("登录成功")
                                window.location.href=
                                    "Home.html?account="+account
                            }else{
                                alert("登录失败")
                            }
                        })
                    }
                },
                sms(){
                    axios
                        .get('/user/sendSms', { params: { phone : vm.rigistModel.phone } })
                        .then(function (resp) {
                            console.log(resp)
                            if (200 == resp.data.code) {
                                console.log(resp.data.data)
                                window.sessionStorage.setItem('Code', resp.data.data)
                            }
                        })
                }
            }
        })
    </script>
    <script src="/js/Login.js"></script>
</body>
</html>